<template>
  <view class="my_stepper addcart">
    <view v-show="value != 0" class="btn" @click.stop="minus">
      <image class="icon" src="/static/images/jianhao.svg" mode=""></image>
    </view>
    <view @click.stop="showkey" class="input_box align_center">
      <view class="num">{{ value ? value : "0" }}</view>
      <!-- <input class="input_value bold" :id="index" type="number" v-model="value" disabled="true" /> -->
    </view>
    <view class="btn" style="width: 50rpx; height: 50rpx" @click.stop="plus">
      <image class="icon" src="/static/images/jiahao.svg" mode=""></image>
    </view>
  </view>
</template>

<script>
export default {
  props: ["goods_id", "num", "sign", "spu_id", "min", "limit", "inventory"],
  data() {
    return {
      value: this.num,
    };
  },
  watch: {
    num: {
      immediate: true,
      deep: true,
      handler() {
        this.value = this.num;
      },
    },
    val(newval) {
      this.value = newval;
    },
  },
  methods: {
    minus() {
      // var num = Number(this.value);
      if (this.value > 1 && +this.value != +this.min) {
        this.value--;
        this.$emit("minus", {
          goods_id: this.goods_id,
          num: this.value,
          sign: this.sign,
          spu_id: this.spu_id,
          timeStamp: new Date().getTime(),
          min: this.min,
          inventory: this.inventory,
          limit: this.limit,
        });
      } else {
        uni.showModal({
          content: "是否删除该商品",
          confirmColor: "#4FA388",
          success: (res) => {
            // console.log("res11111", res);
            if (res.confirm) {
              this.value = 0;
              this.$emit("minus", {
                goods_id: this.goods_id,
                num: 0,
                sign: this.sign,
                spu_id: this.spu_id,
                timeStamp: new Date().getTime(),
                min: this.min,
                inventory: this.inventory,
                limit: this.limit,
              });
              uni.showToast({
                title: "删除成功！",
                icon: "none",
              });
            } else if (res.cancel) {
              console.log("取消删除！");
            }
          },
        });
      }
    },
    plus() {
      // this.value++;
      // var num = Number(this.value);
      this.$emit("plus", {
        goods_id: this.goods_id,
        num: this.value,
        sign: this.sign,
        spu_id: this.spu_id,
        timeStamp: new Date().getTime(),
        min: this.min,
        inventory: this.inventory,
        limit: this.limit,
      });
    },
    showkey() {
      // var num = Number(this.value);
      // this.$emit("showKey", {
      //   goods_id: this.goods_id,
      //   num: this.value,
      //   sign: this.sign,
      //   spu_id: this.spu_id,
      //   timeStamp: new Date().getTime(),
      // });
      this.$emit("showKey");
      console.log("11111111");
    },
  },
};
</script>

<style lang="scss" scoped>
.my_stepper {
  display: flex;
  align-items: center;

  .btn {
    width: 50rpx;
    height: 50rpx;
    // box-sizing: initial;
    // border-radius: 50%;
    // font-weight: bold;
    // line-height: 40rpx;
    // text-align: center;
    .icon {
      width: 100%;
      height: 100%;
    }
  }

  .input_box {
    height: 40rpx;
    // background:#fff;
    margin: 0 8rpx;

    .num {
      text-align: center;
      min-width: 80rpx;
      font-weight: bold;
    }
  }
}

// .my_stepper .input_value {
// 	width: 80rpx;
// 	height: initial;
// 	text-align: center;
// }

// @media(min-width:800px) {

// 	.minus,
// 	.plus {
// 		width: 40px !important;
// 		height: 40px !important;
// 	}

// 	.minus {
// 		line-height: 36px !important;
// 	}

// 	.plus {
// 		line-height: 38px !important;
// 	}

// }
</style>
